<template>
  <view class="app-tabs">
    <view class="tabs-item" @tap="$emit('change', index)" v-for="(item, index) in list" :key="index">
      <text class="tabs-item-text" :class="{ 'tabs-item-text-active': current === index }">{{ item }}</text>
      <text class="tabs-item-border" v-if="current === index"></text>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    list: {
      type: Array,
      default: []
    },
    current: {
      type: Number,
      default: 0
    }
  }
}
</script>
<style lang="scss" scoped>
.app-tabs {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.tabs-item {
  margin-right: 56rpx;
  justify-content: center;
  position: relative;
  padding-bottom: 10rpx;
}

.tabs-item-text {
  font-weight: 400;
  font-size: 30rpx;
  line-height: 35rpx;
  color: #909090;
}

.tabs-item-text-active {
  color: #29A7F6;
}

.tabs-item-border {
  display: block;
  background-image: linear-gradient(to bottom right, #AD18F9, #05DFC7);
  width: 54rpx;
  height: 4rpx;
  border-radius: 2rpx 2rpx 2rpx 2rpx;
  position: absolute;
  left: 50%;
  margin-left: -27rpx;
  bottom: 0;
}
</style>